
import { defineStore } from 'pinia'
import { SYS_FONTS } from '@views/fabric/configs/fonts'
import { ImageCategoryInfo,jxImageCategoryInfo } from '@views/fabric/configs/images'
import { getSupportFonts } from '@views/fabric/utils/fonts'
import { RightStates } from '@views/fabric/types/elements'
import { databaseId } from "@views/fabric/configs/canvas"
import useCanvas from '@views/fabric/Canvas/useCanvas'


export const useMainStore = defineStore('main', {
  state: () => ({
    language: "",
    canvasObject: undefined,
    clonedObject: undefined,
    hoveredObject: undefined,
    leavedObject: undefined,
    currentPoint: null,
    rightState: RightStates.ELEMENT_CANVAS,
    imageCategoryType: [],
    imageCategoryData: ImageCategoryInfo,
    jximageCategoryData: jxImageCategoryInfo,
    illustrationCategoryType: [],
    illustrationCategoryData: ImageCategoryInfo,
    illustrationJxCategoryData: jxImageCategoryInfo,
    handleElementId: '', // 正在操作的元素ID
    sizeMode: 0,  // 模板样式
    unitMode: 0,  // 单位
    gridColorSelf: [[]], // 自定义颜色
    databaseId, // 标识当前应用的indexedDB数据库ID
    selectedTemplatesIndex: [],
    thumbnailsFocus: false, // 左侧导航缩略图区域聚焦
    drawAreaFocus: false, // 编辑区聚焦
    systemFonts: SYS_FONTS, // 系统字体
    disableHotkeys: false, // 禁用快捷键
    exportType: 'image', // 导出面板
    lastEdit: 'editor', // 左边栏
    lastHelp: 'editor', // 左边栏
    poolType: 'editor', // 左边栏
    poolShow: false, // 显示左边栏
  }),

  getters: {
    activeElementList() {
    //   const slidesStore = useSlidesStore()
    //   const currentSlide = slidesStore.currentSlide
    //   if (!currentSlide || !currentSlide.elements) return []
    },
  
    handleElement() {
    //   const slidesStore = useSlidesStore()
    //   const currentSlide = slidesStore.currentSlide
    //   if (!currentSlide || !currentSlide.elements) return null
    //   return currentSlide.elements.find(element => state.handleElementId === element.id) || null
    },
  },

  actions: {
    // updateLanguage
		updateLanguage(language) {
			this.language = language;
		},
    setCanvasObject(canvasObject) {
      this.canvasObject = canvasObject
      
    },
    setHoveredObject(hoveredObject) {
      this.hoveredObject = hoveredObject
    },
    setLeaveddObject(leavedObject) {
      this.leavedObject = leavedObject
    },
    setActiveObject() {
      const [ canvas ] = useCanvas()
      if (!canvas) return
      const activeObject = canvas._activeObject
    },
    // setHandleElementId(handleElementId) {
    //   this.handleElementId = handleElementId
    // },
    
    // setActiveGroupElementId(activeGroupElementId) {
    //   this.activeGroupElementId = activeGroupElementId
    // },
    
    // setHiddenElementIdList(hiddenElementIdList) {
    //   this.hiddenElementIdList = hiddenElementIdList
    // },
  
    // setCanvasDragged(isDragged) {
    //   this.canvasDragged = isDragged
    // },
    setPoolType(poolType) {
      if (poolType === 'help') this.lastHelp = this.poolType
      // if (poolType === 'editor') this.lastEdit = this.poolType
      this.poolType = poolType
    },

    setRightState(rightState) {
      this.rightState = rightState
    },
  
    setThumbnailsFocus(isFocus) {
      this.thumbnailsFocus = isFocus
    },

    setSystemFonts() {
      this.systemFonts = getSupportFonts(SYS_FONTS)
    },
    
    setExportType(type) {
      this.exportType = type
    },

    setDrawAreaFocus(status) {
      this.drawAreaFocus = status
    },
  
    // setDisableHotkeysState(disable) {
    //   this.disableHotkeys = disable
    // },
  
    // setGridLineSize(size) {
    //   this.gridLineSize = size
    // },
  
    // setRulerState(show) {
    //   this.showRuler = show
    // },

    // setClipingImageElementId(elId) {
    //   this.clipingImageElementId = elId
    // },
  
    // setSelectedTableCells(cells[]) {
    //   this.selectedTableCells = cells
    // },
  
    // setScalingState(isScaling) {
    //   this.isScaling = isScaling
    // },
    
    updateSelectedTemplatesIndex(selectedTemplatesIndex) {
      this.selectedTemplatesIndex = selectedTemplatesIndex
    },

    // setDialogForColor(show) {
    //   this.dialogForColor = show
    // },

    // saveDialogForColor(colors[]) {
    //   this.dialogForColor = false
    //   this.colorSelfStore.push(colors)
    // },

    // setDialogForTemplate(show) {
    //   this.dialogForTemplate = show
    // },

    // setSelectPanelState(show) {
    //   this.showSelectPanel = show
    // },
  },
})